const { resolve, join } = require("path");


//引入处理html插件
const HtmlWebpackPlugin = require("html-webpack-plugin");

//引入处理css处理成单独文件插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//引入压缩css插件
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

//去除css死代码
const PurgecssPlugin = require("purgecss-webpack-plugin");
const glob = require("glob");
const PATHS = { src: join(__dirname, "src") };
module.exports = {
  // 1、entry 入口(entry) 指示webpack以哪个文件作为入口起点开始打包，分析构建内部依赖图
  //单入口，如果只有一个入口，使用字符串，指定一个入口文件，打包一个chunk，输出一个bundle,chunk的名称是默认
  //entry: "./src/index.js",

  //Array,多入口，写多个入口文件，所有的入口文件形成一个chunk，名称是默认的，输出也是只有一个bundle
  //entry: ["./src/index.js", "./src/main.js"],

  //object, 多入口， 有几个入口文件就会生成几个chunk，并输出几个bundle，chunk的名称是key
  // entry: {
  //   one: "./src/index.js",
  //   two: "./src/main.js",
  // },
  entry: {
    vender: ["./src/js/jquery.js", "./src/js/common.js"],
    index: "./src/js/index.js",
    cart: "./src/js/cart.js",
    main: "./src/index.html",
  },
  // 2、output 输出(output)指示webpack打包后的资源bundles输出到哪里，以及如何命名。
  output: {
    filename: "./js/[name].js",
    path: resolve(__dirname, "build"),
  },
  // 3、loader
  // loader让webpack能够去处理那些非JavaScript资源css、img等，将它们处理成webpack能够识别的资源，也可以理解成一个翻译过程(webpack自身只能理解js和json)。
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"], //从右到左执行
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "less-loader",
          "postcss-loader",
        ], //从右到左执行
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
          "postcss-loader",
        ], //从右到左执行
      },
      // {
      //   test: /\.{png|jpg|jpeg|gif}$/,
      //   use:[
      //     "url-loader",{loader:'file-loader',options:{}}
      //   ]
      // },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              publicPath: "../images/", //公共路径
              outputPath: "images/", //输出文件夹
              limit: 1024 * 8, //限制大小，小于这个的会压缩转化为base64
              name: "[name][hash:10].[ext]", //输出的名字 原名字+哈希10位数，加后缀}}
            },
          },
        ],
      },
      {
        //处理html中的图片
        test: /\.html$/,
        loader: "html-loader",
      },
      {
        //排除css/js/html和图片
        exclude: /\.(css|js|html|less|scss|png|gif|jpeg|jpg)$/,
        loader: "file-loader",
        options: {
          name: "[name][hash:10].[ext]",
          publicPath: "../font",
          outputPath: "font/",
        },
      },
      // {//eslint只检查js语法
      //   test:/\.js$/,
      //   //排除第三方库
      //   exclude:/node_modules/,
      //   loader:'eslint-loader',
      //   options:{//开启自动修复
      //     fix:true,
      //   }
      // }
    ],
  },
  // 4、plugins
  //插件(plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
  plugins: [
    //默认会创建一个空的，目的就是自动引入打包的资源（js/css）
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "./index.html",
      //压缩html代码
      minify: {
        //移除空格
        collapseWhitespace: true,
        //移除注释
        removeComments: true,
      },
      chunks: ["index", "vender"], //从右往左引入的
    }),
    new HtmlWebpackPlugin({
      template: "./src/cart.html",
      filename: "./html/cart.html",
      chunks: ["cart", "vender"],
    }),
    new MiniCssExtractPlugin({
      filename: "./css/[name].css",
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new PurgecssPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
    }),
  ],
  //5、mode
  //模式(mode)指示webpack使用相应模式的配置。
  //开发模式(development):配置比较简单，能让代码本地调试运行的环境
  //生产环境(production):代码需要不断优化达到性能最好。能让代码优化上线运行的环境。都会自动启用一些插件，生产模式使用插件更多。
  devServer: {
    contentBase: resolve(__dirname, "build"),
    //启用gzip压缩
    compress: true,
    //设置服务器端口号
    port: 8900,
    //自动打开浏览器
    open: true,
    //开启HMR(模块热替换)
    hot: true,
  },
  target: "web",
};
